<template>
    <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    chartData: {
        type: Array,
        required: true,
        default: () => []
    }
});

const chartContainer = ref(null);
let chart = null;

const initChart = () => {
    if (!chartContainer.value) return;

    chart = echarts.init(chartContainer.value);

    const indicators = [
        { name: 'pH值', max: 14 },
        { name: '溶解氧(mg/L)', max: 10 },
        { name: '浊度(NTU)', max: 10 },
        { name: '电导率(μS/cm)', max: 1000 },
        { name: '总磷(mg/L)', max: 1 },
        { name: '氨氮(mg/L)', max: 2 }
    ];

    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            data: props.chartData.map(item => item.location),
            textStyle: {
                color: '#666'
            },
            bottom: 0
        },
        radar: {
            indicator: indicators,
            radius: '65%',
            splitNumber: 5,
            axisName: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    color: ['#ddd']
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            }
        },
        series: [
            {
                type: 'radar',
                emphasis: {
                    lineStyle: {
                        width: 4
                    }
                },
                data: props.chartData.map(item => {
                    return {
                        value: [
                            item.ph,
                            item.dissolvedOxygen,
                            item.turbidity,
                            item.conductivity,
                            item.totalPhosphorus,
                            item.ammoniaNitrogen
                        ],
                        name: item.location,
                        areaStyle: {
                            opacity: 0.3
                        }
                    };
                })
            }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    };

    chart.setOption(option);

    window.addEventListener('resize', resizeChart);
};

const updateChart = () => {
    if (!chart) return;

    chart.setOption({
        legend: {
            data: props.chartData.map(item => item.location)
        },
        series: [
            {
                data: props.chartData.map(item => {
                    return {
                        value: [
                            item.ph,
                            item.dissolvedOxygen,
                            item.turbidity,
                            item.conductivity,
                            item.totalPhosphorus,
                            item.ammoniaNitrogen
                        ],
                        name: item.location,
                        areaStyle: {
                            opacity: 0.3
                        }
                    };
                })
            }
        ]
    });
};

const resizeChart = () => {
    chart && chart.resize();
};

watch(() => props.chartData, () => {
    updateChart();
}, { deep: true });

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (chart) {
        chart.dispose();
        chart = null;
    }
    window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 300px;
}
</style>